<template>
  <div class="echartsBox">
    <div v-if="JSON.stringify(data) !== '{}'" id="rightMonitorPie" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: '',
      data: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取设备状态 */
    async getEquipStatus() {
      const res = await this.$axios.get('/board/internetData/equipWorkStatus')
      if (res?.data.code === 200) {
        this.data = res.data.data
        setTimeout(async () => {
          this.setRightMonitorPie(res.data.data)
        }, 500)
      }
    },
    /* 全厂echarts */
    setRightMonitorPie(data) {
      const option = {
        tooltip: {
          trigger: 'item'
        },

        legend: {
          // right: '5%',
          // left: 'center',
          top: 0,
          right: '10px',
          // width: '50px',
          textStyle: {
            fontSize: '12px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 8, // 设置图例标记的图形宽度
          itemHeight: 8 // 设置图例标记的图形高度
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            // padAngle: 5,
            roseType: 'area',
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: true,
              position: 'outside',
              lineHeight: 13,
              color: '#fff',
              formatter: '{b}:{c}台\n({d}%)'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 13,
                fontWeight: 'normal'
              }
            },
            labelLine: {
              show: true,
              length: 10, // 线的长度
              length2: 20 // 线的第二段长度
            },
            data: [
              { value: data.normalNum, name: '运行' },
              { value: data.maintainNum, name: '保养' },
              { value: data.repairNum, name: '维修' },
              { value: data.pointNum, name: '点检' }
            ]
          }
        ],
        // graphic: {
        //   type: 'text',
        //   left: '35%', // 相对位置
        //   top: '42%', // 相对位置
        //   style: {
        //     text: '83\n 共计', // 中间显示的文本
        //     textAlign: 'center',
        //     fill: '#fff', // 文本颜色
        //     fontSize: 14
        //   }
        // }
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '42%',
            style: {
              text: data.equipNum,
              textAlign: 'center',
              fill: '#fff',
              fontSize: 26
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '57%',
            style: {
              text: '总计',
              textAlign: 'center',
              fill: '#fff',
              fontSize: 12
            }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('rightMonitorPie'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  height: calc(100% - 65px);
}
.kong {
  background-size: 50% auto;
}
</style>
